<template>
  <div class="app">
    APP
    <hr>
    <div>
      {{message}}
    </div>
    <button @click="handleClick">修改message的值</button>
  </div>
  <hr>
  <Navbar></Navbar>
  <hr>
  app组件接收到 todo-input 传递的数据{{receive}}
  <todoinput placeholder="请输入代办事项 " @add="handleAdd" ></todoinput>

  <hr>
<div>
  <router-link to="/">首页</router-link> |
  <router-link to="/about">关于</router-link>|
  <router-link to="/user?username=xiaohuohuo&password=123456">用户</router-link>|

</div>
<router-view></router-view>
</template>

<!-- <script>
// import {ref,reactive} from "vue"
// export default {
//   name: 'App',
//   setup(){
//     const message = ref("今日无事,勾栏听曲")


//     return {
//       message
//     }
//   }
// }
// </script> -->
<script setup>
  import  { provide, ref } from "vue"
  import Navbar from "./components/Navbar.vue"
  import todoinput from "./components/todoinput.vue";
  
  // 定义在顶层的变量,可直接在模板语法中使用
  const message = ref("今天无事,勾栏听曲")

  const handleClick = ()=>{
    message.value = Math.random() +" 今日无事，勾栏听曲"
  }


const  receive = ref("")
const handleAdd =(data)=>{
  receive.value = data 
}


// 将祖先组件中的数据提供给后后代组件共享使用
provide("message",message)
</script>


<style scoped>

</style>
